<template>
  <div id="fenlei">
      <div class="box">
            <span class="q1" @click="hui">&lt;</span><span class="q2">分类商品</span>
           
      </div>
       <div class="box4" v-show="qwe">
                <img  src="../assets/imgs/6.png" alt="">
        </div>
      <div class="box2">
        <ul>
            <li v-for="item in list" :key="item.id"> 
                <img :src="item.pic" alt="">
                <p v-html="item.name"></p>
            </li>
               
        </ul>
       
      </div>
 </div>
</template>

<script>
import {getfenlei1} from '../utils/api'
import '../assets/imgs/6.png'
export default {
  name: '',
  data() { 
    return {
        list:[],
        qwe:false
    }
  },
  created() {
      getfenlei1().then(res=>{
        
        
         res.forEach((item,index)=>{
             if(item.categoryId==this.$route.query.id){
                this.list.push(item) 

             }
           
         })
           if(this.list.length==0){
               this.qwe=true
             }
         console.log(this.list);
     
      })
  },
  methods:{
      hui(){
          this.$router.go(-1)
      }
  },
 }
</script>

<style lang='scss' scoped>
.box{
    width: 100%;
    height: 50px;
    // background-color: red;
    line-height: 50px;
    span{
        font-size: 20px;
    }
    .q1{
        margin-left: 15px;
        font-size: 24px;
    }
    .q2{
        margin-left: 120px;
    }
}
.box2{
    width: 100%;
    height: 400px;
   
    ul{
        width: 100%;
        display: flex;
        justify-content: space-between;
        list-style: none;
        flex-wrap: wrap;
        li{
            width: 48%;
            height: 200px;
            background-color: #F0EDD4;
            color: #CAA582;
    // background-color: red;
    img{
        width: 100%;
        height: 170px;
    }
    p{
        width: 100%;
        font-size: 12px;
          white-space: nowrap;
        overflow: hidden;
            margin-top: 5px;
        text-overflow: ellipsis;

    }

}
    }
}
 .box4{
        width: 300px;
        height: 300px;
        // background-color: red;
        img{
            width: 100%;
            height: 100%;
            margin-left: 50px;
            margin-top: 100px;
        }
}
</style>